package myJs.components

import cats.effect.SyncIO
import japgolly.scalajs.react.ReactMonocle._
import japgolly.scalajs.react._
import japgolly.scalajs.react.component.Scala.BackendScope
import japgolly.scalajs.react.extra.StateSnapshot
import japgolly.scalajs.react.vdom.all._
import monocle.Lens
import monocle.macros._
import myJs.Implicits._
import myJs.myPkg.jquery._
import myJs.tool.Tool
import myJs.tool.Tool._

import scala.collection.immutable.SeqMap

/** Created by yz on 3/11/2020
  */
object GroupHeaderComponent {

  @Lenses
  case class State(
      show: Boolean,
      sampleHeader: String,
      classNoteHeader: String,
      pairHeaderShow: Boolean,
      pairHeader: String,
      optionMap: SeqMap[String, String]
  )

  object State {

    def init = {
      State(
        show = false,
        sampleHeader = "Sample",
        classNoteHeader = "ClassNote",
        pairHeaderShow = false,
        pairHeader = "Pair_ID",
        optionMap = SeqMap[String, String]()
      )
    }
  }

  class Backend(bs: BackendScope[Unit, State]) {

    val fieldNames = List()

    def didMount(s: State) = {
      SyncIO {
        Tool.popover
        val node = ReactDOM.findDOMNode(bs.raw).get.node
        val parentJq = $(node)
        val bv = $("#form").bv
        fieldNames.foreach { fieldName =>
          val curJq = parentJq.findInputByName(fieldName)
          bv.addField(curJq)
        }
      }
    }

    def unmount = {
      SyncIO {
        val bv = $("#form").bv
        val node = ReactDOM.findDOMNode(bs.raw).get.node
        val parentJq = $(node)
        fieldNames.foreach { fieldName =>
          val curJq = parentJq.findInputByName(fieldName)
          bv.updateStatus(curJq, "VALID").removeField(curJq)
        }
      }
    }

    def render(s: State) = {

      implicit class MyLens[T](lens: Lens[State, T]) {

        def zoomL(implicit r: Reusability[T]) = {
          StateSnapshot.withReuse.zoomL(lens).prepareVia(bs).apply(s)
        }

      }

      val pairOptionMap = SeqMap("" -> "") ++ s.optionMap

      div(
        (display := s"none").when(!s.show),
        div(
          `class` := "form-group",
          label(`class` := "control-label col-sm-3", s"${messages("sampleName")}", ":"),
          div(
            `class` := "col-sm-2",
            PureSelectComponent.Props(State.sampleHeader.zoomL, name = "sampleHeader", optionMap = s.optionMap).render
          ),
          label(`class` := "control-label col-sm-2", s"${messages("group")}", ":"),
          div(
            `class` := "col-sm-2",
            PureSelectComponent
              .Props(State.classNoteHeader.zoomL, name = "classNoteHeader", optionMap = s.optionMap)
              .render
          )
        ),
        div(
          `class` := "form-group",
          (display := s"none").when(!s.pairHeaderShow),
          label(`class` := "control-label col-sm-3", s"${messages("pairingID")}", ":"),
          div(
            `class` := "col-sm-2",
            PureSelectComponent.Props(State.pairHeader.zoomL, name = "pairHeader", optionMap = pairOptionMap).render
          )
        )
      )
    }

  }

  val Component = ScalaComponent
    .builder[Unit]
    .initialState(State.init)
    .renderBackend[Backend]
    .componentDidMount(x => x.backend.didMount(x.state))
    .componentWillUnmount(_.backend.unmount)
    .build

}
